<template>
  <el-card class="chart-card">
    <div ref="lineChart" class="chart"></div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { getQuShi } from '../api/statistics.js';


const lineChart = ref();
let chartInstance = null;

const trendData = [
  { date: '2025-06-01', count: 100 },
  { date: '2025-06-02', count: 120 },
  { date: '2025-06-03', count: 130 },
  { date: '2025-06-04', count: 90 },
  { date: '2025-06-05', count: 140 },
];

const initChart = () => {
  chartInstance = echarts.init(lineChart.value);
  chartInstance.setOption({
    title: { text: '发帖趋势' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: trendData.map(item => item.date)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: trendData.map(item => item.count),
        type: 'line',
        smooth: true,
        areaStyle: {
          color: 'rgba(75, 192, 192, 0.3)'
        },
        lineStyle: {
          color: 'rgb(75, 192, 192)'
        },
        itemStyle: {
          color: 'rgb(75, 192, 192)'
        }
      }
    ]
  });
};

onMounted(async () => {
  try {
    const response = await getQuShi();
    const trendData = response;

    chartInstance = echarts.init(lineChart.value);
    chartInstance.setOption({
      title: { text: '发帖趋势' },
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'category',
        data: trendData.map(item => item.date)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: trendData.map(item => item.count),
          type: 'line',
          smooth: true,
          areaStyle: {
            color: 'rgba(75, 192, 192, 0.3)'
          },
          lineStyle: {
            color: 'rgb(75, 192, 192)'
          },
          itemStyle: {
            color: 'rgb(75, 192, 192)'
          }
        }
      ]
    });

  } catch (error) {
    console.error('获取发帖趋势失败:', error);
  }
});
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
}
.chart-card {
  margin-bottom: 20px;
}
</style>
